<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div v-if="flag" id="app">
        <!-- <h2 id="hhh">
            {{ msg }}
        </h2> -->

        <h3>
            {{ count }}
        </h3>
        <button @click="add">+++</button>

        <button @click="isShow">点我销毁</button>
    </div>


    <script src="./vue.js"></script>
    <script>

        let vm = new Vue({
            el: "#app",
            data: {
                msg: "我是msg数据",
                data: [],
                count: 1,
                flag: true
            },
            // template: "<h3>我是tem</h3>",
            methods: {
                fn() {
                    
                }
            },
            // 生命周期  在最合适的时间做最合适的事情 (合理划分代码)
            // Vue实例创建之前  (基本不使用)  得不到data中的数据  methods中的方法
            // 0
            beforeCreate() {
                // console.log(this.msg)
                // console.log(this.fn)
            },
            // Vue实例创建完成  (使用率高)  可以获取到this上除($refs)以外的所有内容
            // 5
            created() {
                // 读取不到dom结构
                // console.log(this.msg)
                // console.log(this.fn)
            },
            // dom结构准备挂载  (使用少)
            // 10
            beforeMount() {
                // console.log('我准备挂载了')
            },
            // dom结构挂载完成 （使用率高）  可以操作dom结构
            // 15
            mounted() {
                // console.log('dom结构挂载完成')
            },
            // 视图的内容更新之前  (数据已更新)
            beforeUpdate() {
                console.log('数据更新之前', this.count)
            },
            // 视图内容更新之后
            updated() {
                console.log('数据更新完毕')
            },
            // beforeDestroy() {
            //     console.log('销毁之前')
            // },
            // destroyed() {
            //     console.log('销毁完毕')
            // },
            methods: {
                add() {
                    this.count += 1
                },
                isShow() {
                    this.flag = false
                }
            }
        })

        // function Vue(obj) {
        //     const { beforeCreate } = obj
        //     beforeCreate()
        // }

        // vm.$mount("#app")

        // el   vm.$mount("#app")

    </script>
</body>

</html>